<template>
  <div>
    <div class="menu">
      <div @click="isAreaShow=!isAreaShow" :class="isAreaShow?'active':''">{{ current }}
         <i :class="isAreaShow?'iconfont icon-shouqi':'iconfont icon-zhankai1'" style="font-size:12px"></i>
      </div>
      <div>品牌</div>
      <div @click="search">特色</div>
    </div>
    <!-- 选择地区 -->
    <div class="area" v-show="isAreaShow">
      <ul>
        <li
          @click="handleArea(data)"
          v-for="data in arealist"
          :key="data"
          :class="data===current?'active':''"
        >{{ data }}</li>
      </ul>
    </div>
    <div class="cinemalist">
      <div class="adress" v-for="item in comcinemas" :key="item.cinemaId">
        <div class="left">
          <span>{{ item.name }}</span>
          <span>{{ item.address }}</span>
        </div>
        <div class="right">
          <span>{{item.lowPrice/100 }}元</span>
          <span>{{item.Distance.toFixed(2)}}km</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
/*import { cinemaData } from "@/api/api";*/
import axios from 'axios'
export default {
  data() {
    return {
      cinemas: [],
      isAreaShow: false,
      current: "全城", // 记录选择的区域
    };
  },
  computed: {
    arealist() {
      let newarr = this.cinemas.map((item) => item.districtName);
      let arealist = ["全城", ...Array.from(new Set(newarr))];
      return arealist;
    },
    // 选择区域
    comcinemas() {
      if (this.current === "全城") {
        return this.cinemas;
      }
      return this.cinemas.filter((item) => item.districtName === this.current);
    },
    /* comcinemas(){
      return this.cinemas
    } */
  },
  methods: {
    handleArea(data) {
      // 改变current的值，计算属性自动计算
      this.current = data;
      this.isAreaShow = false;
    },
    // 点击跳转到搜索页面
    search(){
      this.$router.push(`/search`)
    }
  },
  /*async mounted() {
    console.log(cinemaData)
    let ret = await cinemaData();
    console.log(ret);
    this.cinemas = ret.data.data.cinemas;
  },*/
  mounted(){
    axios.get(("https://m.maizuo.com/gateway?cityId=110100&ticketFlag=1&k=8832444"),
        {
          headers: {
            "X-Client-Info":
                '{"a":"3000","ch":"1002","v":"5.0.4","e":"1598087896889693885431809","bc":"110100"}',
            "X-Host": 'mall.film-ticket.cinema.list',
          }
        }).then(ret=>{
          console.log(ret)
          this.cinemas = ret.data.data.cinemas
        })
  }
};
</script>

<style scoped lang="scss">
.cinemalist{
  margin-bottom: 50px;
  margin-top: 86px;
}
.active {
  color: red;
}
.menu {
  width: 100%;
  height: 40px;
  background: #fff;
  display: flex;
  line-height: 40px;
  text-align: center;
  position: fixed;
  top: 50px;
  border-bottom: 1px solid #ccc;
  div {
    float: left;
    flex: 1;
    border-right: 1px solid #666;
  }
}
.area {
  position: fixed;
  top: 90px;
  left: 0;
  width: 100%;
  background: white;
  z-index: 10;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 25%;
      text-align: center;
      padding: 5px;
      font-size: 14px;
      box-sizing: border-box;
      border: 1px solid #666;
    }
  }
}
.adress {
  display: flex;
  padding: 20px 10px;
  span {
    display: block;
  }
  .left {
    color: #191a1b;
    font-size: 15px;
    span:nth-of-type(2) {
      color: #797d82;
      width: 280px;
      font-size: 12px;
      margin-top: 5px;
      margin-right: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
  .right {
    span:nth-of-type(1) {
      font-size: 15px;
      color: #ff5f16;
    }
    span:nth-of-type(2) {
      color: #797d82;
      font-size: 12px;
      margin-top: 5px;
    }
  }
}
</style>
